"use client"
import News from "@/constant/News";
import Image from "next/image";
import {RiSquareFill} from "react-icons/ri";
import Link from "next/link";

export default function NewsSection(){
    return (
        <>
            <section id={"news"} >
                <div className={"p-4"}>
                    <div className={"grid grid-cols-12 gap-4"}>
                        {
                            News.map((item,index)=>{
                                return <Link href={`/news/detail?id=${item.id}`} key={index} className={"col-span-12 md:col-span-4 lg:col-span-3 group min-h-[300px]"}>
                                    <Image src={item.cover} alt={""} height={300} width={400} className={"rounded-md object-cover group-hover:scale-105 transition-all duration-500"}/>
                                   <div className={"group-hover:mt-2 transition-all duration-500"}>
                                       <div>{item.title}</div>
                                       <div className={"line-clamp-2 text-gray-500 text-sm"}>{item.content}</div>
                                       <div className={"text-xs text-gray-400 mt-1"}>{item.createdAt} 浏览 4501</div>
                                   </div>
                                </Link>
                            })
                        }

                    </div>
                </div>
            </section>
        </>
    )
}